{% extends "core/base.html" %}

{% block title %} Conversation {% endblock %}

{% block content %}
<h1 class="mb-6 text-3xl"> Conversation </h1>

<div class="space-y-6">
    {% for message in conversation.messages.all %}
        <div class="p-6 flex {% if message.created_by == request.user %} bg-blue-100 {% else %} bg-gray-100 {% endif%} rounded-xl">
            <div>
                <p class="mb-4"><strong>{{ message.created_by.username}}</strong> @ {{ message.created_at }} </p>
                <p>{{ message.content }}</p>
            </div>
        </div>
    {% endfor %}
</div>

<form action="." method="post" class="mt-6">
    {% csrf_token %}

    {{ form.as_p }}
    <button class="py-4 px-8 text-lg bg-teal-500 hover:bg-teal-700 rounded-xl text-white">
        Send
    </button>
</form>
{% endblock %}